<template>
  <div class="show">
    <div id="carouselExampleCaptions" class="carousel slide aaa" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner aa">
      <div class="carousel-item active ">
        <img src="@/assets/img/home/0-3.webp" class="d-block w-100" alt="...">
        
      </div>
      <div class="carousel-item">
        <img src="@/assets/img/home/0-2.webp" class="d-block w-100" alt="...">
        
      </div>
      <div class="carousel-item">
        <img src="@/assets/img/home/0-1.webp" class="d-block w-100" alt="...">
        
      </div>
    </div>
    <a class="carousel-control-prev zu-carousel" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next zu-carousel" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <menu-bar-item/>
  </div>
</template>

<script>
import MenuBarItem from '@/components/common/menybar/MenuBarItem'
export default {
  name:'SlideShow',
  components: {
    MenuBarItem
  },
  
}
</script>

<style scoped>
  .show{
    width: 100%;
    height: 600px;
    }
  .zu-carousel{
    height: 61%;
    margin-top: 70px;
  }
  .carousel-item img{
    width: 100%;
    height: 600px;
    }
</style>
